<template>
  <div class="root1">
    <div class="top">
      <div class="title">我的收藏</div>
      <div class="items">
        <div class="item" @click="changeclt(0)"><strong>Btn</strong>按钮</div>
        <div class="item" @click="changeclt(1)">
          <caret-right style="width: 20px; height: 20px" />输入
        </div>
        <div class="item" @click="changeclt(2)">
          <expand style="width: 20px; height: 20px" />段落
        </div>
        <div class="item" @click="changeclt(3)">
          <d-arrow-left style="width: 20px; height: 20px" />返回
        </div>
      </div>
    </div>
    <el-button
      type="text"
      class="op"
      @click="removesome"
      v-text="rmvtext"
    ></el-button>
    <div class="clts">
      <div class="clt" v-for="(clt, i) in curclts" :key="i">
        <div class="cltitem">
          <button
            :style="clt.css"
            style="width: 76px"
            v-show="clt.type == 'button'"
          >
            button
          </button>

          <input
            placeholder="placeholder"
            :style="clt.css"
            v-show="clt.type == 'input'"
          />
          <el-checkbox
            label="勾选"
            size="large"
            v-show="batch"
            class="checkbox"
            v-model="clt.checked"
            @change="checkchange(clt.checked, clt._id)"
          ></el-checkbox>
        </div>
        <el-collapse style="--el-color-white: transparent; width: 300px">
          <el-collapse-item name="1">
            <template #title>
              HTML
              <el-tooltip content="点击复制" placement="right"
                ><el-icon @click="copyhtml" style="margin-left: 5px">
                  <copy-document /> </el-icon
              ></el-tooltip>
            </template>
            <el-card class="card" id="csscard">{{ clt.html }}</el-card>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              CSS
              <el-tooltip content="点击复制" placement="right"
                ><el-icon @click="copycss" style="margin-left: 5px">
                  <copy-document /> </el-icon
              ></el-tooltip>
            </template>
            <el-card class="card" id="csscard"
              >.mybutton {
              <div v-for="(value, name) in clt.displaycss" :key="name">
                {{ name }}: {{ value }};
              </div>
              }</el-card
            >
          </el-collapse-item>
        </el-collapse>
        <button class="mybutton" @click="removeclt(clt._id)">移除此项</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8082";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  data() {
    return {
      butclts: [],
      inputclts: [],
      textclts: [],
      curclts: [],
      checkedclts: [],
      batch: false,
      rmvtext: "批量管理",
    };
  },
  created() {
    let name = window.localStorage.getItem("curname");
    axios
      .get("/store", {
        params: {
          username: name,
        },
      })
      .then((res) => {
        let clts = res.data;
        clts.forEach((elem) => {
          elem["checked"] = false;
        });
        this.butclts = clts.filter((elem) => elem.type == "button");
        this.inputclts = clts.filter((elem) => elem.type == "input");
        this.textclts = clts.filter((elem) => elem.type == "text");

        this.curclts = this.butclts;
        console.log(
          clts.filter((elem) => {
            elem.username == "u1";
          })
        );
        if (res.data == "fail") {
          alert("wrong");
        }
      });
  },
  methods: {
    removeclt(id) {
      let name = window.localStorage.getItem("curname");
      ElMessageBox.confirm("确定要移除这项收藏吗？", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .get("/store/del", {
            params: {
              dropid: id,
              username: name,
            },
          })
          .then((res) => {
            let clts = res.data;
            this.butclts = clts.filter((elem) => elem.type == "button");
            this.inputclts = clts.filter((elem) => elem.type == "input");
            this.textclts = clts.filter((elem) => elem.type == "text");

            this.curclts = this.butclts;
            console.log(res.data, this.butclts);
            if (res.data == "fail") {
              alert("wrong");
            } else {
              ElMessage({
                type: "success",
                message: "移除成功",
              });
            }
          });
      });
    },
    changeclt(i) {
      let clts = [this.butclts, this.inputclts, this.textclts];
      this.curclts = clts[i];
      if (i == 3) {
        this.$router.push({ path: "/mybutton" });
      }
    },
    removesome() {
      let name = window.localStorage.getItem("curname");
      if (!this.batch) {
        this.batch = true;
        this.rmvtext = "全部移除";
      }
      //已经在批量管理模式下了
      else if (this.batch) {
        this.batch = false;
        axios
          .get("/store/delmany", {
            params: {
              dropids: this.checkedclts,
              username: name,
            },
          })
          .then((res) => {
            console.log(res.data)
            let clts = res.data;
            this.butclts = clts.filter((elem) => elem.type == "button");
            this.inputclts = clts.filter((elem) => elem.type == "input");
            this.textclts = clts.filter((elem) => elem.type == "text");

            this.curclts = this.butclts;
            console.log(res.data, this.butclts);
            if (res.data == "fail") {
              alert("wrong");
            } else {
              ElMessage({
                type: "success",
                message: "移除成功",
              });
            }
          });
        this.rmvtext = "批量管理";
      }
    },
    checkchange(checked, id) {
      if (checked) {
        this.checkedclts.push(id);
      }
      else if (!checked) {
        let pos = this.checkedclts.indexOf(id)
        this.checkedclts.splice(pos,1)
      }
    },
  },
};
</script>

<style scoped>
.top {
  display: flex;
  align-items: center;
}
.op {
  color: #512b57;
  font-size: 20px;
  margin-left: 20px;
}
.cltitem {
  margin: 15px;
}
.items {
  display: flex;
  margin: 10px;
}
.item:hover {
  color: #eae5f0;
  font-weight: bold;
  cursor: pointer;
}
.items > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(108, 80, 137, 0.3);
  background: rgba(108, 80, 137, 0.3);
  border-radius: 40px;
  width: 50px;
  height: 50px;
  box-shadow: 3px 3px 11px #512b57;
  padding: 10px;
  margin: 10px;
  text-align: center;
}
.title {
  font-size: 30px;
  font-weight: bold;
  margin: 30px 28px;
}
.clts {
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
}
.clt {
  margin: 20px;
}
.card {
  background-color: rgba(108, 80, 137, 0.3);
  background: rgba(108, 80, 137, 0.3);
  color: azure;
}
.checkbox {
  margin-left: 150px;
}
</style>